"""
@author: Gaoyaoxia
@date: 2021-03-17 11:50:32
"""
<!-- 锚点链接 -->
<template>
  <a-affix :offset-top="offsetTop">
    <div id="anchorPoint" class="right-content">
      <ul>
        <li
          v-for="(item, index) in navList"
          :class="{ active: activeIndex == index }"
          :key="index"
          @click="jump(index)"
        >
          <a class="nav-item">
            <i class="icon suncnui suncnui-icon-yuan"></i>
            <p>{{ item.label }}</p>
          </a>
        </li>
      </ul>
    </div>
  </a-affix>
</template>

<script>
export default {
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    offsetTop: {
      type: Number,
      default: 0
    },
    className: {
      type: String,
      default: ''
    },
    navList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    jump(index) {
      let jump = document.getElementsByClassName(this.className)
      // 获取需要滚动的距离
      let total = jump[index].offsetTop - 20
      let distance =
        document.documentElement.scrollTop || document.body.scrollTop
      let step = total / 10
      if (total > distance) {
        this.smoothDown(distance, total, step)
      } else {
        let newTotal = distance - total
        step = newTotal / 10
        this.smoothUp(distance, total, step)
      }
    },
    smoothDown(distance, total, step) {
      if (distance < total) {
        distance += step
        document.body.scrollTop = distance
        document.documentElement.scrollTop = distance
        setTimeout(this.smoothDown(distance, total, step), 10)
      } else {
        document.body.scrollTop = total
        document.documentElement.scrollTop = total
      }
    },
    smoothUp(distance, total, step) {
      if (distance > total) {
        distance -= step
        document.body.scrollTop = distance
        document.documentElement.scrollTop = distance
        setTimeout(this.smoothUp(distance, total, step), 10)
      } else {
        document.body.scrollTop = total
        document.documentElement.scrollTop = total
      }
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
.right-content {
  position: absolute;
  width: 110px;
  padding: 20px 15px 20px 15px;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  font-size: 14px;
  li {
    padding: 15px 0 15px 20px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    border-left: 1px solid #e0e0e0;
    i {
      font-size: 12px;
      color: #919191;
      position: absolute;
      top: 16px;
      left: -6px;
    }
    a {
      line-height: 19px;
      color: #333;
      text-decoration: none;
    }
  }
  .active {
    i,
    p {
      color: #1075c6;
    }
    i:before {
      content: '\e685';
    }
  }
}
</style>